<!-- @format -->
<script setup>
	import { reactive, ref, watch } from 'vue'
	// 搜索关键字
	const keyword = ref('')

	// 监视 keyword 的变化
	// 只要 keyword 变了，每次都会执行 watch 的回调函数
	watch(keyword, (newVal, oldVal) => {
		// console.log('keyword 变了')
		console.log(newVal, oldVal)
	})

	// 响应式对象
	const obj = reactive({
		username: '',
		password: ''
	})

	// 监视 obj 的变化
	watch(obj, (newVal, oldVal) => {
		// console.log('obj 变了')
		console.log(newVal, oldVal) // 指向同一个对象，值一样
		console.log(newVal === oldVal) // true
		console.log(newVal === obj) // true
	})
</script>
<template>
	<div>
		<input
			type="text"
			v-model="keyword"
			placeholder="请输入关键字" />
		<br />
		<br />
		<input
			type="text"
			v-model="obj.username"
			placeholder="请输入用户名" />
		<br />
		<br />
		<input
			type="text"
			v-model="obj.password"
			placeholder="请输入密码" />
	</div>
</template>

<style scoped></style>
